<style lang="less">
.jingbiao{
    .btzhuce{
        width: 10vw;
    }
    iframe{
        height:10vw;
    }
}
</style>
<template>
    <div class="jingbiao">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="上传附件" name="shangchuanfujian">
                <el-form :model="shangchuanFrom" ref="scFrom" class="userdata" :rules="rules">
                <el-form-item
                    label="方案附件"
                    prop="attachment"
                    >
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        :limit = "1"
                        :on-exceed="handleExceed"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :http-request="uploadSectionFile"
                        :file-list="fileList"
                        :auto-upload="true">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传{{extentions}}文件</div>
                    </el-upload>
                </el-form-item>
                <el-form-item
                    prop="detailed_desc"
                    >
                    <div>方案介绍</div>
                    <tinymce-editor v-model="shangchuanFrom.detailed_desc" style="width:35vw;" ></tinymce-editor>
                    <!-- <el-input class="name" type="textarea"  placeholder="备注"  v-model="shangchuanFrom.detailed_desc"></el-input> -->
                </el-form-item>
            </el-form>
            <el-button @click="btqueren" class="btzhuce" type="primary" round >确认上传附件</el-button>
            <el-button @click="btdaisheji" class="btzhuce" type="primary" round >代设计平台</el-button>
            </el-tab-pane>
            <el-tab-pane label="电子相册" name="dianzixiangce">
                <photoalbum ref="photoalbum"></photoalbum>
            </el-tab-pane>
        </el-tabs>
        
    </div>
</template>
<script>
import TinymceEditor from '../../common/tinymce';
import photoalbum from './photoalbum'
import { designerdoUpload,assumeRole,beforeUpload} from '@/request/api';
export default {
    data() {
        return {
            open:{

            },
            fileList:[],
            extentions:"zip,rar,7z,gz",
            
            shangchuanFrom:{
                designer_demand_id:'',
                attachment:'',
                detailed_desc:'',
            },
            crm_oid:0,
            rules: {
                attachment: [
                    { required: true, message: '请先上传附件', trigger: 'blur' },
                ],
                detailed_desc: [
                    { required: true, message: '请填写文件说明', trigger: 'blur' }
                ],
            },
            activeName:"shangchuanfujian",
            designerdemanddata:{},
        }
    },
    mounted() {
    },
    methods: {
        setid(id,crm_oid){
            this.shangchuanFrom = {
                designer_demand_id:'',
                attachment:'',
                detailed_desc:'',
            };
            this.fileList = [];
            this.crm_oid = crm_oid;
            this.shangchuanFrom.designer_demand_id = id;
            this.activeName = "shangchuanfujian";
            this.getAssumeRole();
            this.getbeforeUpload();
        },
        getbeforeUpload(){
            beforeUpload({id:this.shangchuanFrom.designer_demand_id}).then(res => {
                if(res.ok){
                    this.shangchuanFrom.attachment = res.data.attachment;
                    this.shangchuanFrom.detailed_desc = res.data.detailed_desc;
                    console.log(this.shangchuanFrom);
                    if(this.shangchuanFrom.attachment != undefined){
                        this.fileList = [{name: this.shangchuanFrom.attachment.split('/').pop()}];
                    }
                }
            })
        },
        handleClick(tab, event){
            console.log(this.$refs.photoalbum);
            if(this.activeName == "dianzixiangce"){
                this.$nextTick(function () {
                    this.$refs.photoalbum.setid(this.shangchuanFrom.designer_demand_id,this.crm_oid);
                });
            }
        },
        submitUpload() {
            this.$refs.upload.submit();
        },
        handleExceed(files, fileList){
            
            let file = files[0];
            console.log(file);
            this.fileList = [file];
            this.uploadfile(file);
            // this.$refs.upload.submit();
        },
        uploadSectionFile(param){
            this.uploadfile(param.file);
        },
        uploadfile(file){
            console.log(file);
            this.extention = file.name.split('.').pop();
            if (this.extentions.indexOf(this.extention) === -1) {
                this.$message.error('文件格式不支持!');
                this.fileList = [];
                return;
            }
            let name =  '/designer/' + this.randomString(8) + '_' + file.name;
            this.multipartUpload(name, file);
        },
        async multipartUpload (name, file) {
            let that = this;
            try {
                // 填写Object完整路径和本地文件的完整路径。Object完整路径中不能包含Bucket名称。
                // 您可以通过自定义文件名（例如exampleobject.txt）或目录（例如mytestdoc/exampleobject.txt）的形式，实现将文件上传到当前Bucket或Bucket中的指定目录。
                // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
                let result = await that.client.multipartUpload(name, file, {
                progress: function (p, checkpoint) {
                    that.process = parseInt(p*100);
                },
                })
                that.shangchuanFrom.attachment = name;
            } catch(e){
                console.log('上传失败'+e);
                // HeyUI.$Message.error("上传失败，请重试");
            }
        },
        randomString(length) {
            var result = '';
            var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
                for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
                return result;
        },
        btqueren(){
            this.$refs['scFrom'].validate((valid) => {
                if (valid) {
                    designerdoUpload(this.shangchuanFrom).then(res => {
                        if(res.ok){
                            this.seriesGallerys = res.data;
                            this.$message({
                                message: '上传附件成功',
                                type: 'success'
                            });
                            this.$emit('close');
                        }
                    })
                }
                
            });
            
        },
        getAssumeRole(){
            assumeRole({}).then(res => {
                if(res.ok){
                    var assumedata = res.data.res;
                    let OSS = require('ali-oss');
                    this.client = new OSS({
                        // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
                        region: 'oss-cn-qingdao',
                        // 从STS服务获取的临时访问凭证。临时访问凭证包括临时访问密钥（AccessKeyId和AccessKeySecret）和安全令牌（SecurityToken）。
                        accessKeyId: assumedata.Credentials.AccessKeyId,
                        accessKeySecret: assumedata.Credentials.AccessKeySecret,
                        stsToken: assumedata.Credentials.SecurityToken	,
                        // 填写Bucket名称。
                        bucket: 'kny-sxy'
                    });
                }
            })
        },
        btdaisheji(){
            window.open("https://erp.knoya.com/apply_designer_fixed/"+this.crm_oid+"/proposer");
        }
  },
  components: {
        photoalbum,
        TinymceEditor
  },

}
</script>
